<template>
  <div class="main">
    <div class="header">购物车</div>
    <div class="goodlist">
      <div
        class="good-item"
        v-for="(item, index) in goodslist"
        :key="item.goods_id"
      >
        <input
          type="checkbox"
          class="item-checkbox"
          v-model="goodsChecked"
          :value="item"
        />
        <van-card>
          <template #price>
            {{ item.goods_price }}
          </template>
          <template #title>
            {{ item.goods_name }}
          </template>
          <template #thumb>
            <img :src="item.goods_img" alt="" />
          </template>
          <template #num>
            <button class="reduce" @click="reduceGood(index)">-</button>
            <span class="goodnum">{{ item.goods_count }}</span>
            <button class="add" @click="item.goods_count++">+</button>
          </template>
        </van-card>
      </div>
    </div>
    <div class="footer">
      <label class="fl">
        <input
          type="checkbox"
          class="checkAll"
          v-model="checkAll"
          @change="changeAll"
        />
        全选
      </label>
      <button
        :class="{ 'go-buy': true, fr: true, disabled: isDisabled }"
        @click="goPay"
      >
        支付
      </button>
      <p class="fr price-container">
        合计：<span class="price-wrap"
          >¥<span class="total-price">{{ totalPrice }}</span></span
        >
      </p>
    </div>
  </div>
</template>

<script>
import uri from "@/config/uri";
import axios from "axios";
import Vue from "vue";
import { Card, Tag } from "vant";
import { Dialog } from "vant";

Vue.use(Card);
Vue.use(Tag);

// 引入时间处理模块
import moment from "moment";

// 轻提示
import { Toast } from "vant";
Vue.use(Toast);

export default {
  data() {
    return {
      goodslist: [],
      goodsChecked: [],
      checkAll: false,
      isDisabled: false,
    };
  },
  async created() {
    await axios.get(uri.getGoodsList).then((ret) => {
      this.goodslist = ret.data.cartInfo;
    });
  },
  methods: {
    reduceGood(index) {
      if (this.goodslist[index].goods_count > 1) {
        this.goodslist[index].goods_count--;
      }
    },
    changeAll() {
      if (this.checkAll) {
        this.goodsChecked = this.goodslist;
      } else {
        this.goodsChecked = [];
      }
    },
    goPay() {
      // 判断是否可以跳转
      if (!this.isDisabled) {
        // 发送请求
        // 生成 6位 随机数字
        let num = "";
        for (let i = 0; i < 6; i++) {
          num += parseInt(Math.random() * 10);
        }
        // 生成订单编号
        let WIDout_trade_no = moment().format("YYYYMMDD") + num;
        axios;
        // 开启弹窗
        Dialog.confirm({ message: "您是否已经成功支付？" }).then((res) => {
          // 发送请求查看支付状态
          axios
            .get(
              "https://m.28sjw.com/order/orderPayStatusCheck.php?_oid=" +
                WIDout_trade_no
            )
            .then((res) => {
              // 轻提示支付情况
              Toast.fail("支付失败！");
            });
        });
        // .get(
        //   uri.getPay +
        //     "?WIDout_trade_no=" +
        //     WIDout_trade_no +
        //     "&WIDsubject=Vue综合练习(邵俊伟)" +
        //     "&WIDtotal_fee=" +
        //     this.totalPrice
        // )
        // .then((res) => {
        //   console.log(res);
        // });

        // 新页面打开
        window.open(
          "https://m.28sjw.com/alipay_wap/alipayapi.php?" +
            "?WIDout_trade_no=" +
            WIDout_trade_no +
            "&WIDsubject=Vue综合练习(邵俊伟)" +
            "&WIDtotal_fee=" +
            this.totalPrice
        );
      }
    },
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.goodsChecked.map((item) => {
        total += item.goods_price * item.goods_count;
      });
      // 根据 total 判断是否给支付按钮添加禁用样式
      if (total <= 0) {
        this.isDisabled = true;
      } else {
        this.isDisabled = false;
      }
      return total.toFixed(2);
    },
  },
  watch: {
    goodsChecked: function () {
      this.checkAll = this.goodsChecked.length === this.goodslist.length;
    },
  },
};
</script>

<style>
.header {
  line-height: 44px;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
}
.good-item {
  display: flex;
  background-color: #fff;
  margin: 10px;
  padding: 10px 15px 10px 0;
  margin-top: 20px;
  border-radius: 8px;
  align-items: center;
}
.item-checkbox {
  margin: 0 15px;
}
.van-card {
  background-color: #fff;
  padding: 0;
}
.reduce,
.add {
  width: 20px;
  height: 20px;
  background-color: #f8f9fa;
  border: none;
  outline: none;
  color: #333;
}
.goodnum {
  display: inline-block;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #f2f3f5;
  margin: 0 2px;
  color: #111;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.footer {
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.go-buy {
  margin-top: 5px;
  margin-left: 10px;
  width: 110px;
  line-height: 40px;
  border-radius: 20px;
  border: 0;
  outline: none;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
  color: #fff;
}
.disabled {
  opacity: 0.5;
}
.price-wrap {
  color: #ee0a24;
}
.total-price {
  font-size: 18px;
  font-weight: 700;
}
.price-container {
  width: 100px;
  text-align: right;
}
.van-card {
  width: 100%;
}
</style>